<script setup lang="ts">
import { defineProps} from 'vue'
const props = defineProps(['linkItem'])
let toFriendLink = ()=>{
    window.open(props.linkItem.linkUrl)
}
</script>
<template>
    <div class="friend-link-item" @click="toFriendLink">
        <div class="friend-link-item-top">
          <div class="left-link-name" :title="linkItem.linkName">{{ linkItem.linkName }}</div>
          <div class="right-link-actived">{{ linkItem.isActived == 1 ? '链接正常' : '链接无效'  }}</div>
        </div>
        <div class="friend-link-item-bottom">
          <div class="left-desc" :title="linkItem.linkDesc">{{ linkItem.linkDesc }}</div>
          <div class="right-cover">
            <img class="right-link-logo" :src="linkItem.linkLogo" alt="" srcset="">
          </div>
        </div>
      </div>
</template>
<style lang="scss" scoped>
    .friend-link-item {
        position: relative;
        z-index: 88;
        padding: 1rem;
        overflow: hidden;
        max-height: 200px;
        border-radius: calc(var(--luox-default-radius) / 2);
        background-color: transparent;
        background-color: #fff;
        box-shadow: 0px 0px 10px 3px #ececec;
        transition: 1s all ease;
        cursor: pointer;
        &::after {
            transition: .5s all;
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: -100%;
            top: 0px;
            z-index: -1;
            //background-color: var(--luox-primary-color);
        }
        &:hover {
        }
        &:hover::after {
          background-color: rgb(240, 253, 244);
            left: 0px;
        }
    .friend-link-item-top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left-link-name {
        width:120px;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 1.4rem;
        font-weight: bold;
      }
      .right-link-actived {
        position: relative;
        color: rgb(38, 226, 38);
        &::after {
            position: absolute;
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgb(38, 226, 38);
            box-shadow: 0px 0px 10px 1px rgb(38, 226, 38);
        }
      }
    }
    .friend-link-item-bottom {
      margin-top: 1rem;
      $imageWidth: 45px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left-desc {
        width: calc(100% - $imageWidth);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .right-link-logo {
        width: $imageWidth;
        height: $imageWidth;
        object-fit: cover;
        border-radius: 50%;
      }
    }
  }
</style>
